<template>
  <div class="login-wrap">
    <el-form class="login-container">
      <h1 class="title">忘记密码</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="用户账号" autocomplete="off"></el-input>
      </el-form-item>
            <el-form-item label="">
        <el-input type="text" v-model="phone" placeholder="用户手机号" autocomplete="off"></el-input>
      </el-form-item>
        <el-form-item label="">
        <el-input type="text" v-model="yy" placeholder="请输入验证码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="新密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" style="width:100%;" @click="doSubmit()">修改密码</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary" @click="gotoLogin()">去登陆</el-link>
      </el-row>
    </el-form>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        phone:'',
        yy:''
      }
    },
  
    methods: {
        doSubmit(){
  this.$message({
              message: "修改密码成功",
              type: 'success'
            });
        },
      gotoLogin() {
        this.$router.push("/");
      }
    }
  }
</script>
 
<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 720px;
    padding-top: 12%;
  background-image: url('~@/assets/ss.jpg');
    /* background-color: #3b7cf5; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }
 
  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    border: 1px solid #eaeaea;
    text-align: left;
    background-color: rgba(229, 229, 229, 0.8);
  }
 
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #0b0b0b;
  }
</style>